<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>单位</title>

    <style>
      /*
            长度单位：
                像素
                    - 屏幕（显示器）实际上是由一个一个的小点点构成的
                    - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
                    - 所以同样的200px在不同的设备下显示效果不一样
                百分比
                    - 也可以将属性值设置相对于其父元素属性的百分比
                    - 设置百分比可以使子元素跟随父元素的改变而改变 
                em
                    - em是相对于自身元素的字体大小计算的
                    - 1em = 1font-size = 16px(默认)
                    - em会根据字体大小的改变而改变
                rem
                    - rem是相对于根元素html的字体大小来计算的，也是默认16px
         */
      html {
        font-size: 10px;
      }
      .box1 {
        width: 300px;
        height: 100px;
        background-color: orange;
      }

      .box2 {
        width: 50%;
        height: 50%;
        background-color: aqua;
      }

      .box3 {
        font-size: 20px;
        width: 15em;
        height: 10rem;
        background-color: brown;
      }
    </style>
  </head>

  <body>
    <div class="box1">
      <div class="box2">你好</div>
    </div>
    <div class="box3">搭建好</div>
  </body>
</html>
